<template>
	<div class="nav">
		<el-row>
			<el-col :span="4" class="logo">
				<div style="height:60px;">
					<img src="../../assets/img/logo.png" />
				</div>
			</el-col>
			<el-col :span="16">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
					<el-menu-item index="/home">首页</el-menu-item>
					<el-submenu index="2">
						<template slot="title">主营产品</template>
						<el-menu-item index="sports">跑车</el-menu-item>
						<el-menu-item index="station">街车</el-menu-item>
						<el-menu-item index="stationWagon">旅行车</el-menu-item>
						<el-submenu index="2-4">
							<template slot="title">选项4</template>
							<el-menu-item index="2-4-1">选项1</el-menu-item>
							<el-menu-item index="2-4-2">选项2</el-menu-item>
							<el-menu-item index="2-4-3">选项3</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-menu-item index="community">动态广场</el-menu-item>
					<el-menu-item index="4">个人中心</el-menu-item>
					<el-menu-item index="5">加入我们</el-menu-item>
				</el-menu>
			</el-col>
			<el-col :span="4" style="text-align: center;" class="user">
				<div class="demo-basic--circle">
					<div class="block">
						<el-avatar :size="50" :src="circleUrl"></el-avatar>
						<span>韦</span>
					</div>
					<div class="block">
						<el-button @click="toLogin">登录</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: "1",
				circleUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20200222%2F3025a22ccdfb425cabe61efbc7c15f24.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635574979&t=e71f0cad63ab292142f56a5ae152b217",
			};
		},
		methods: {
			toLogin() {
				this.$router.push({
					name: 'Login'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.el-menu.el-menu--horizontal {
		border-bottom: none !important;
	}

	.logo {
		display: flex;
		justify-content: center;

		img {
			height: 100%;
		}
	}

	.user {
		height: 60px;

		div {
			height: 100%;
		}
	}

	.block {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.el-menu-demo {
		display: flex;
		justify-content: center;
	}

	.nav {
		width: 100%;
		background: #fff;
		position: sticky;
		top: 0px;
		left: 0;
		z-index: 100;

		.el-container {
			.el-aside {
				overflow: visible;
				height: 80px;
				border-right: 1px solid #ddd;
				text-align: center;

				img {
					height: 100%;
				}
			}

			.el-container {
				.el-header {
					line-height: 40px;
					// border-bottom: 1px solid #ddd;

					.el-link {
						margin-right: 1%;
						font-size: 12px;
					}
				}

				.el-footer {
					ul {
						height: 100%;
						list-style: none;
						display: flex;
						align-items: center;
						font-size: 14px;
						// column-gap: 40px;

						li {
							height: 40px;
							line-height: 40px;

							&:hover {
								cursor: pointer;
								color: #3a8ee6;
							}

							::v-deep .el-submenu__title {
								height: 40px;
								line-height: 40px;
							}

							i {
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
</style>
